<script setup>
import {reactive} from 'vue'
import router from '@/router/index.js'

const props = defineProps({
  movie: {
    type: Object
  }
})

const runId = () => {
  router.push({path: '/film/', query: {id: props.movie.id}})
}

</script>

<template>
  <div class="xjt-movieItem">
    <div class="pic" style="width: 100%;overflow: hidden;border: 1px solid #ddd;">
      <el-image
          class="hvr-grow"
          style="width: 100%; height: 320px"
          :src="props.movie.cover_url"
          fit="cover"></el-image>
    </div>
    <div class="info">
      <div class="title-score" style="display: flex;">
        <div @click="runId"
             style="font-size: 20px;line-height: 50px;flex: 1;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer">
          {{ props.movie.title }}
        </div>
        <div style="font-size: 18px;line-height: 50px;color: #ffb400;width: 24px;">{{ props.movie.score }}</div>
      </div>
      <div class="type" style="line-height: 32px;font-size: 16px;height: 32px;color: darkgrey;height: 100%">
        类型：{{ props.movie.types }}
      </div>
      <div class="actors" style="line-height: 32px;font-size: 16px;height: 32px;color: darkgrey;
            width: 100%;height:100%;overflow: hidden;">主演：{{ props.movie.actors.split(',').slice(0, 2).join(',') }}
      </div>
      <div class="release-time" style="line-height: 32px;font-size: 16px;height: 32px;color: darkgrey;">
        上映时间：{{ props.movie.release_date }}
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>